
<div class="autoparts-search">
  <div class="epc-title-wrapper">
    <apes-card class="query-wrapper">
      <div class="query-control-button">
        <apes-switch [(ngModel)]="switchValue">切换</apes-switch>
        <button apes-button apesType="primary" [ngStyle]="{margin: '0 20px 0 20px'}" (click)="search()" [disabled]="searchDisabled"><i apes-icon apesType="search"></i>查询</button>
      </div>
      <div class="query-input">
        <div *ngIf="switchValue" style="display: flex;">
<!--          <label>车架号:<input type="text" [(ngModel)]="vin"></label>-->
<!--          <label>配置车型编码:<input type="text" [(ngModel)]="vehicleConfig"></label>-->
<!--          <label>汽车厂牌名称:<input type="text" [(ngModel)]="brandName"></label>-->
          <input apes-input placeholder="车架号" type="text" [(ngModel)]="vin">
          <input apes-input placeholder="配置车型编码" type="text" [(ngModel)]="vehicleConfig">
          <input apes-input placeholder="汽车厂牌名称" type="text" [(ngModel)]="brandName">
        </div>
        <div *ngIf="!switchValue"  style="display: flex;">
          <input apes-input placeholder="EPC车型编码" type="text" [(ngModel)]="epcId">
          <input apes-input placeholder="EPC版本" type="text" [(ngModel)]="epcVersion">
<!--          <label>EPC车型编码:<input type="text" [(ngModel)]="epcId"></label>-->
<!--          <label>EPC版本:<input type="text" [(ngModel)]="epcVersion"></label>-->
        </div>
      </div>
    </apes-card>
    <apes-card class="model-info-wrapper">
      <epc-model-info></epc-model-info>
    </apes-card>
  </div>
  <div class="epc-control">
    <div style="float: left; height: 100%;">
      <apes-select style="width: 200px; margin-right: 10px; padding-left: 6px"
                   apesShowSearch
                   apesServerSearch
                   apesPlaceHolder="OE码/配件名称"
                   [(ngModel)]="keyword"
                   [apesDisabled] = "keywordAndMenuNameDisabled"
                   [apesShowArrow]="false"
                   [apesFilterOption]="apesFilterOption"
                   (apesOnSearch)="selectSearch($event)"
                   (ngModelChange)="selectChoose($event)">
        <apes-option *ngFor="let o of selectOption" [apesLabel]="o.name" [apesValue]="o.id"></apes-option>
      </apes-select>
      <input type="text" style="width: 200px" placeholder="目录名称(回车查询)" [disabled]="keywordAndMenuNameDisabled" (keydown.enter)="searchMenuName($event)" apes-input [(ngModel)]="menuName">
    </div>
    <div style="float: right">
      <button style="margin-right: 8px" apes-button apesType="primary" (click)="showType == 1 ? toggle(2) : toggle(1)" [disabled]="showDisabled">显示/隐藏</button>
      <button apes-button apesType="primary" [disabled]="showType !== 2" (click)="nextSubgroup()">下一组</button>
    </div>
  </div>
  <div class="epc-wrapper">
    <apes-card class="epc-menu" [ngStyle]="showType == 1 ? {'display':'block'} : {'display':'none'}">
      <epc-menu></epc-menu>
    </apes-card>
    <apes-card class="epc-content">
      <epc-level-list  [ngStyle]="showType == 1 ? {'display':'block'} : {'display':'none'}"></epc-level-list>
      <apes-card class="epc-image-content" [ngStyle]="showType == 2 ? {'display':'block'} : {'display':'none'}">
        <epc-image-content></epc-image-content>
      </apes-card>
      <apes-card class="epc-parts-list" [ngStyle]="showType == 2 ? {'display':'block'} : {'display':'none'}">
        <epc-parts-list></epc-parts-list>
      </apes-card>
      <epc-parts-update [ngStyle]="showType == 3 ? {'display':'block'} : {'display':'none'}"></epc-parts-update>
    </apes-card>
    <div class="epc-load-container" *ngIf="isLoading">
      <div class="epc-container">
        <div class="epc-boxLoading epc-boxLoading1"></div>
        <div class="epc-boxLoading epc-boxLoading2"></div>
        <div class="epc-boxLoading epc-boxLoading3"></div>
        <div class="epc-boxLoading epc-boxLoading4"></div>
        <div class="epc-boxLoading epc-boxLoading5"></div>
      </div>
    </div>
  </div>
  <div class="shopping-mall-wrapper">
    <epc-shopping-mall></epc-shopping-mall>
  </div>
</div>
